<template>
  <div id="teacherRecommend">
    <div class="teacherRecommendContent">
      <div class="teacherRecommendContentHeader">
        <div class="teacherRecommendContentHeaderTab">
          <ul>
            <li v-for="(item, index) in headerTabArray" :key="index" @click="headerTab(index, item.classifyId)">
              <p :class="{blue: headerTabIndex === index}">{{item.classifyName}}</p>
              <span v-show="headerTabIndex === index"></span>
            </li>
          </ul>
        </div>
        <div class="teacherRecommendContentHeaderSearch">
          <label for="searchStylist">
            <img src="../../assets/img/ideaMarket/sear.png" alt="">
            <input id="searchStylist" type="text" placeholder="请输入设计师昵称" v-model="stylistName" @keydown.enter="fetchSkillSelectRecommend(id)">
          </label>
          <button @click="fetchSkillSelectRecommend(id)" style="background:#15A29C;color:#fff">搜索</button>
        </div>
      </div>
      <div class="teacherRecommendContentList">
        <ul>
          <li v-for="(item, index) in teacherRecommended" :key="index" class="teacherRecommendcontent">
            <div class="teacherRecommendContentListLeft" @click="jumpTo('/stylistInfo?stylistUserId=' + item.userId)">
              <img :src="$globalImageUrl + item.avatar" alt="">
              <div class="teacherRecommendContentListLeftText">
                <h2 class="ellipse">{{item.userName}}</h2>
                <p class="ellipse">创作 {{item.count || 0}}</p>
                <p class="ellipse">{{userTypeText(item.userType)}}</p>
              </div>
            </div>
            <div class="teacherRecommendContentListRight">
              <div class="teacherRecommendContentListRightImg" v-for="(items, indexs) in item.literatureList" :key="indexs" @click.stop="jumpTo('/worksDetail?worksId=' + items.id)">
                <img :src="$globalImageUrl + items.literatureImg" alt="">
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="pageNumber" v-if="pageTotals != 0">
        <div @click="prevPage()">上一页</div>
        <div @click="nowPage(item)" :class="{pageActive: pageActiveIndex === item}" v-for="(item, index) in pageTotals" :key="index">{{item}}</div>
        <div @click="nextPage()">下一页</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'teacherRecommend',
  data () {
    return {
      pageTotals: 1,
      pageActiveIndex: 1,
      headerTabIndex: 0,
      headerTabArray: [],
      teacherRecommended: [],
      stylistName: '',
      id: 1
    }
  },
  created () {
    this.fetchSkillSelectClassify()
  },
  methods: {
    // 上一页
    prevPage () {
      if (this.pageActiveIndex > 1) {
        this.pageActiveIndex--
        this.fetchSkillSelectClassify()
      }
    },
    // 下一页
    nextPage () {
      if (this.pageTotals > this.pageActiveIndex) {
        this.pageActiveIndex++
        this.fetchSkillSelectClassify()
      }
    },
    // 选择页码
    nowPage (index) {

      this.pageActiveIndex = index
      this.fetchSkillSelectClassify()
    },
    // 名师推荐tab切换和接口请求
    headerTab (val, id) {
      if (this.id === id) {
        return
      }
      this.id = id
      this.headerTabIndex = val
      this.fetchSkillSelectRecommend()
    },
    // 获取名师推荐tab
    fetchSkillSelectClassify () {
      this.$api.getSkillSelectClassify({
      }).then(res => {
        if (res.code === 0) {
          this.headerTabArray = res.data
          console.log(res.data)
          this.fetchSkillSelectRecommend(res.data[0].classifyId)
        }
      })
    },
    // 获取名师推荐列表
    fetchSkillSelectRecommend () {
      this.$api.getSkillSelectRecommend({
        categoryId: this.id,
        userName: this.stylistName
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.teacherRecommended = res.data
          console.log(res.data)

        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#teacherRecommend{
  .teacherRecommendContent{
    .pageNumber{
        width: 100%;
        height: 50px;
        padding: .2rem;
        text-align: center;
        .pageActive{
          color: #fff;
          background-color: #15A29C;
        }
        div{
          display: inline-block;
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          background-color: #fff;
          padding: .03rem .1rem;
          margin: 0 .05rem;
        }
      }
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .teacherRecommendContentHeader{
      background-color: #fff;
      padding: .2rem;
      border-bottom: 1px solid #eee;
      font-size: 0;
      .teacherRecommendContentHeaderTab{
        display: inline-block;
        width: 70%;
        vertical-align: middle;
        border: 1px solid #fff;
        ul{
          li{
            position: relative;
            display: inline-block;
            height: .4rem;
            line-height: .4rem;
            margin-right: .1rem;
            p{
              font-size: 0.2rem;
              font-weight: 500;
              color: #333;
              line-height: .28rem;
            }
            .blue {
              color: #15a29c;
            }
            span{
              display: inline-block;
              width: 90%;
              height: .035rem;
              background-color: #15a29c;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
            }
          }
        }
      }
      .teacherRecommendContentHeaderSearch{
        display: inline-block;
        width: 30%;
        text-align: right;
        vertical-align: middle;
        label{
          border: 1px solid #DCDFE6;
          border-radius: .05rem;
          height: .4rem;
          line-height: .4rem;
          display: inline-block;
          box-sizing: content-box;
          margin-right: .1rem;
          position: relative;
          input#searchStylist{
            display: inline-block;
            color: #606266;
            font-size: .16rem;
            font-weight: 500;
            line-height: .4rem;
            width: 2rem;
            height: 100%;
            padding: 0 .2rem;
            border-radius: .05rem;
            padding-left: .4rem;
          }
          img{
            position: absolute;
            left: .08rem;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            width: .25rem;
            height: .25rem;
            background-color: #fff;
            z-index: 100;
          }
        }
        button{
          outline: none;
          border: 1px solid #ccc;
          border-radius: .05rem;
          line-height: .4rem;
          padding: 0 .2rem;
          background-color: #fff;
          color: #333;
          font-size: .16rem;
          display: inline-block;
        }
      }
    }
    .teacherRecommendContentList{
      background-color: #fff;
      // padding: .2rem;
      ul{
        li{
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: nowrap;
          padding: .2rem;
          border-bottom: 1px solid #eee;
          .teacherRecommendContentListLeft{
            width: calc(100% - 7.9rem);
            height: 1.5rem;
            padding-right: .2rem;
            line-height: 1.5rem;
            img{
              display: inline-block;
              width: .8rem;
              height: .8rem;
              border-radius: 50%;
            }
            .teacherRecommendContentListLeftText{
              display: inline-block;
              vertical-align: middle;
              padding-left: .15rem;
              h2{
                font-size: 0.2rem;
                color: #333;
                line-height: 0.28rem;
                font-weight: 500;
              }
              p{
                font-size: 0.16rem;
                color: #333;
                line-height: 0.24rem;
                font-weight: 500;
              }
            }
          }
          .teacherRecommendContentListRight{
            width: 7.9rem;
            height: 1.5rem;
            line-height: 1.5rem;
            overflow: hidden;
            .teacherRecommendContentListRightImg{
              margin-top: .1rem;
              display: inline-block;
              width: 1.8rem;
              height: 1.3rem;
              box-sizing: content-box;
              padding-right: .1rem;
              img{
                display: inline-block;
                width: 100%;
                height: 100%;
                vertical-align: top;
              }
            }
            .teacherRecommendContentListRightImg:last-child {
              padding-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
